<template>
  <div class="toast" v-show="isShow">
    <div >{{info}}</div>
  </div>
</template>

<script>
  export default {
    name:'toast',
    data(){
      return {
        info:'',
        isShow:false
      }
    },
    methods:{
      message(info,delay=1000){
        this.info = info
        this.isShow = true
        setTimeout(()=>{
          this.isShow=false
        },delay)
      }
    }
  }
</script>

<style scoped>
  .toast{
    position: fixed;
    top:50%;
    left:50%;
    color:#fff;
    background-color:rgba(0,0,0,0.3);
    transform:translate(-50%,-50%);
    padding:8px 12px;
    z-index: 99;
    color:#fff;

  }
</style>
